<template>
  <LayoutTabs
    v-model:activeKey="activeKey"
    class="je-func-app-main"
    tab-position="top"
    :options="FuncAppMainTabs"
  >
    <template #pane="{ tab }">
      <component :is="tab" :func-bean="funcBean" origin="app"></component>
    </template>
  </LayoutTabs>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { Tabs, Panel, Button } from '@jecloud/ui';
  import {
    MobileBaseConfig,
    FuncButton,
    FuncChildren,
    MobileListConfig,
    FuncFormFields,
  } from '../index';
  import { FuncAppMainTabs } from '../../hooks/tabs-config';
  import LayoutTabs from '../func/layout-tabs.vue';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'FuncAppMainTabs',
    components: {
      Button,
      Panel,
      PanelItem: Panel.Item,
      Tabs,
      TabPane: Tabs.TabPane,
      MobileBaseConfig,
      MobileListConfig,
      FuncFormFields,
      FuncButton,
      FuncChildren,
      LayoutTabs,
    },
    props: { funcBean: Object },
    setup() {
      const activeKey = ref(FuncAppMainTabs[0].key);
      const router = useRouter();
      const onClick = () => {
        router.push({ name: 'Home' });
      };
      return { FuncAppMainTabs, activeKey, onClick };
    },
  });
</script>
<style lang="less">
  .je-func-app-main {
    & > .ant-tabs-nav {
      height: 40px;
      padding: 0 16px;
      // border-top: 1px solid @border-color-split;
    }
    &.router-view {
      .ant-tabs-nav {
        padding: 0;
      }
    }
  }
</style>
